import React, { useState, useEffect, useRef } from 'react';
import { Table, Rate, Button, Row, Col, Icon } from 'antd';
import styles from './index.less';

const TableOkr = (props) => {
  const [keys, setKeys] = useState([]);
  const { list, master, category, okrId, goOkrDetail } = props;

  useEffect(() => {
    const keyList = list.map((item) => item.key);
    setKeys(keyList);
  }, [list]);

  const columns = [
    {
      title: '目标',
      dataIndex: 'oname',
      width: '30%',
      render: (text, record) => (
        <div className={styles.table_okr_oname}>
          <span className={styles.table_okr_name_o}>
            O{Number(record.key) + 1}
          </span>
          {text}
        </div>
      ),
    },
    {
      title: '进度',
      dataIndex: 'oprogress',
      align: 'center',
      width: '5%',
      render: (text) => <span>{text ? `${text}%` : 0}</span>,
    },
    {
      title: '最近更新',
      dataIndex: 'oupdateTime',
      align: 'center',
      width: '15%',
    },
    {
      title: '负责人',
      dataIndex: 'master',
      align: 'center',
      width: '10%',
      render: (text) => <span>{master}</span>,
    },
    {
      title: '类型',
      dataIndex: 'type',
      width: '15%',
      align: 'center',
      render: (text) => (
        <span>{category === '0' ? '团队目标' : '个人目标'}</span>
      ),
    },
    {
      title: '权重',
      dataIndex: 'oweight',
      width: '5%',
      align: 'center',
      render: (text) => <span>{text ? `${text}` : 0}</span>,
    },
    {
      title: '得分',
      dataIndex: 'oscore',
      width: '5%',
      align: 'center',
      render: (text) => <span>{text ? `${text}` : 0}</span>,
    },
    {
      title: '关联',
      dataIndex: 'operation',
      align: 'center',
      width: '15%',
      render: (text, record) => (
        <span>
          {record.orelation
            ? JSON.parse(record.orelation).length > 0
              ? '是'
              : '否'
            : '否'}
        </span>
      ),
    },
  ];
  const clickRowBody = (record) => {
    // setRouteFun()
    goOkrDetail(okrId);
  };
  return (
    <div style={{ flex: '1' }}>
      <Row gutter={10} style={{ textAlign: 'center', fontSize: '16px', fontWeight: '500', color: '#6859c6', marginBottom: '10px' }}>
         <Col span={8} style={{ textAlign: 'left' }}>目标</Col>
         <Col span={3}>负责人</Col>
         <Col span={2}>权重</Col>
         <Col span={2}>进度</Col>
         <Col span={2}>得分</Col>
         <Col span={5}>更新时间</Col>
         <Col span={2}>关联</Col>
      </Row>
      <div className={styles.components_table_demo_okr}>
         {list.length > 0 ? list.map((item, index)=>(<Row key={index} onClick={()=> goOkrDetail(okrId)}>
          <Col span={8}>
            <div className={styles.table_okr_oname}>
            <span className={styles.table_okr_name_o}>
                O{Number(index) + 1}
              </span>
              {item.oname}
            </div>
          </Col>
          <Col span={3}>{master}</Col>
          <Col span={2}>{item.oweight || 0}</Col>
          <Col span={2}>{item.oprogress || 0}</Col>
          <Col span={2}>{item.ofinalscore || 0}</Col>
          <Col span={5}>{item.creation_time}</Col>
          <Col span={2}>{item.orelation == 0 ? '否' : '是'}</Col>
          {item.okrDetailPoList.map((val, num)=>(<Row key={num} style={{ width: '100%',color: '#6c6e6f' }}>
            <Col span={8} className={styles.table_okr_oname} style={{ textAlign: 'left' }}>
                <span className={styles.kr_table_label}>{`KR${num + 1}`}</span>{val.krname}
            </Col>
            <Col span={3}>{master}</Col>
            <Col span={2}>{val.krweight || 0}</Col>
            <Col span={2}>{val.krprocess || 0}</Col>
            <Col span={2}>{val.krendscore || 0}</Col>
            <Col span={5}>{val.creation_time}</Col>
          <Col span={2}>--</Col>
          </Row>))}
         </Row>)) : <div></div>}
      </div>
    </div>
  );
};

export default TableOkr;
